<template>
    <div>
        <myHead title="注册" :show="true"></myHead>
        <div class="img-div">
            <van-image
            width="150"
            style="margin:0 auto"
            src="http://calabashbaby.cn/img/new2233.png"
            fit='contain'
            round
        />
        </div>
        <van-form @submit="onSubmit" style="margin-top:10px">
            <van-cell-group>
                <van-field 
                    v-model="register.username" 
                    label="用户名" 
                    placeholder="请输入用户名" 
                    name="username" 
                    required
                    :rules="[{ required: true, message: '请输入用户名'},{pattern:userPattern, message: '请输入正确用户名' }]"
                    />
                <van-field 
                    v-model="register.phone" 
                    label="电话" 
                    placeholder="请输入电话号码" 
                    name="phone" 
                    required
                    :rules="[{ required: true, message: '请输入电话号码' },{pattern:phonePattern, message: '请输入正确电话号码' }]"
                    />
                <van-field 
                    v-model="register.pwd" 
                    label="密码" 
                    placeholder="请输入密码" 
                    name="pwd" 
                    required
                    :type='type'
                    :right-icon="type=='password'?'closed-eye':'eye-o'"
                    @click-right-icon='changeType'
                    :rules="[{ required: true, message: '请输入密码' },{pattern:pwdPattern, message: '请输入正确密码' }]"
                    />
                <van-field 
                    v-model="register.pwd" 
                    label="确认密码" 
                    placeholder="请确认密码" 
                    name="agpwd" 
                    required
                    :type='type1'
                    :right-icon="type1=='password'?'closed-eye':'eye-o'"
                    @click-right-icon='changeType1'
                    :rules="[{ required: true, message: '请确认密码' },{pattern:pwdPattern, message: '请输入正确密码' }]"
                    />
            <!-- <div class="agreeCheck"> -->
                <van-field :rules="[{ required: true, message:'请同意我们的条款' }]" name='agree'>
                    <template #input>
                    <van-checkbox v-model="checked" >请同意我们的条款</van-checkbox>
                    </template>
                </van-field>
            <!-- </div> -->
            </van-cell-group>
            <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">登录</van-button>
                    </div>
        </van-form>
    </div>
</template>
<script>
export default {
    setup() {
        
    },
    data(){
        return{
            checked: false,
            register:{},
            phonePattern:this.$reg.phone,
            pwdPattern:this.$reg.pwd,
            userPattern:this.$reg.user,
            type:"password",
            type1:"password"
        }
    },
    methods:{
        onSubmit(value){
            console.log(value);
            this.$ajax.register(value)
            .then(res=>{
                console.log(res);
                if(res.code==200){
                    this.$router.push({name:'login',query:{phone:value.phone}})
                }
            })
            .catch(err=>{
                console.log(err);
            })
        },
        changeType(){
            this.type=this.type =='password'?'type':'password';
        },
        changeType1(){
            this.type1=this.type1 =='password'?'type1':'password';
        }
    }
}
</script>
<style scoped>
.img-div{
        /* margin-left: 100px; */
        display: flex;
        justify-content: center;
}
</style>